<template>
	<div class="bind-groups-to-scene-container">
		<el-tabs v-model="activeName">
			<el-tab-pane name="bindGroups" label="绑定分组">
				<div class="groups-pane">
					<div style="width: 50%">
						<el-table :data="groupList" border style="width: 100%">
							<el-table-column label="" :width="50" align="center">
								<template slot-scope="scope">
									<el-checkbox v-model="scope.row.selected" @change="onSelectGroup(scope.row)"></el-checkbox>
								</template>
							</el-table-column>
							<el-table-column label="id" :width="80" align="center" prop="id"></el-table-column>
							<el-table-column label="技能组名称" align="center" prop="group"></el-table-column>
							<!-- <el-table-column label="技能组成员" :show-overflow-tooltip="true" align="center" prop="member"></el-table-column> -->
						</el-table>
						<br />
						<PageSize :pages="checkBind" @changePageSize="changePageSize" @changeCurrentPage="changeCurrentPage" />
					</div>

					<span class="selected-pane">
						<div class="img-question-hover">
							<span>派工优先级</span>
							<el-popover class="img-question" placement="top-start" width="160" trigger="hover" content="编号越小，优先级越高。可以拖拽排序。">
								<img style="vertical-align: top" slot="reference" src="@/assets/img/aiworkflowimage/question.png" width="12px" height="12px" />
							</el-popover>
							<span>：</span>
						</div>
						<br />
						<draggable :sort="true" ghostClass="tag-ghost" :list="selectedGroups">
							<el-tag
								v-for="(item, index) in selectedGroups"
								:key="item.label"
								:type="item.type"
								closable
								@close="onDeleteSeletedGroup(item)"
								style="margin-right: 10px; margin-bottom: 10px"
								effect="dark"
							>
								<span>{{ index + 1 + '. ' }}</span>
								{{ item.group }}
							</el-tag>
						</draggable>
					</span>
				</div>
			</el-tab-pane>
		</el-tabs>
		<el-button type="primary" class="save-btn" @click="onSaveSelectedGroups">保存</el-button>
		<el-button type="primary" class="back-btn" @click="goBack">返回</el-button>
	</div>
</template>

<script>
import PageSize from '../components/PageSize.vue';
import { getBizscenariosInfo, getGroupsDetails, setBizscenariosProfile, getGroupsList, createWorkflowStep } from '@/api/api';
import draggable from 'vuedraggable';

export default {
	components: {
		PageSize,
		draggable
	},

	data() {
		return {
			activeName: 'bindGroups',
			sceneData: undefined,
			groupList: [],
			selectedGroups: [],
			checkBind: {
				scenarioId: undefined,
				page: 1,
				pageSize: 10,
				total: 0,
				role: ''
			}
		};
	},

	async mounted() {
		this.sceneData = JSON.parse(sessionStorage.getItem('sceneData'));
		this.checkBind.scenarioId = this.$route.params.id;
		await getBizscenariosInfo(this.checkBind.scenarioId).then(res => {
			if (res.status === 200) {
				const { agentGroup } = res.data.details;
				if (agentGroup && agentGroup.length > 0) {
					this.selectedGroups = agentGroup.map(value => {
						return { ...value, group: value.name };
					});
				}
			}
		});
		this.refreshGroupsDetail();
	},

	methods: {
		goBack() {
			this.$router.go(-1);
		},
		refreshGroupsDetail() {
			getGroupsList(this.checkBind)
				.then(res => {
					if (res.status === 200) {
						this.checkBind.total = res.data.count;
						this.groupList = res.data.data.map(item => {
							let member = '-';
							if (item.agents && item.agents.length > 0) {
								item.agents.forEach(value => {
									member += value.userName + '；';
								});
								if (member.length > 1) {
									member = member.substring(1, member.length - 1);
								}
							}
							let selected = false;
							const newItem = {
								group: item.name,
								id: item.id,
								member: member,
								selected: selected
							};
							for (let i = 0; i < this.selectedGroups.length; i++) {
								if (this.selectedGroups[i].id === item.id) {
									selected = true;
									newItem.selected = selected;
									this.selectedGroups[i] = newItem;
									break;
								}
							}
							return newItem;
						});
					}
				})
				.catch(error => {
					this.$message.error(error);
				});
		},
		changePageSize(pageSize) {
			this.checkBind.pageSize = pageSize;
			this.refreshGroupsDetail();
		},
		changeCurrentPage(page) {
			this.checkBind.page = page;
			this.refreshGroupsDetail();
		},
		onSelectGroup(row) {
			let hasAdded = false;
			for (let i = 0; i < this.selectedGroups.length; i++) {
				if (row.id === this.selectedGroups[i].id) {
					if (!row.selected) {
						this.selectedGroups.splice(i, 1);
					}
					hasAdded = true;
					break;
				}
			}
			if (!hasAdded && row.selected) {
				this.selectedGroups.push(row);
			}
		},
		onDeleteSeletedGroup(groupData) {
			for (let i = 0; i < this.selectedGroups.length; i++) {
				if (this.selectedGroups[i].id === groupData.id) {
					this.selectedGroups[i].selected = false;
					this.selectedGroups.splice(i, 1);
					break;
				}
			}
		},
		onSaveSelectedGroups() {
			if (!this.selectedGroups || this.selectedGroups.length < 1) {
				this.$message.error('请至少绑定一个技能组！');
				return;
			}
			setBizscenariosProfile({
				id: this.checkBind.scenarioId,
				profileType: 'agentGroup',
				value: {
					value: this.selectedGroups.map(value => {
						return value.id;
					})
				}
			})
				.then(res => {
					if (res.status === 200) {
						this.$message.success('绑定技能组成功！');
					}
				})
				.catch(e => {
					switch (e.code) {
						case '1101':
							this.$message.error('保存技能组失败，请求权限拒绝！');
							break;
						case '1201':
							this.$message.error('保存技能组失败，该表单正在被使用中！');
							break;
						case 6009:
							this.$message.error('业务场景启用中，无法进行操作！');
							break;
						default:
							this.$message.error(`保存技能组失败${e.message}`);
							break;
					}
				});
		}
	}
};
</script>

<style lang="less" scoped>
.bind-groups-to-scene-container {
	position: relative;
	.save-btn {
		background: #6384fe;
		border-radius: 4px;
		line-height: 3px;
		position: absolute;
		top: 0;
		right: 100px;
	}
	.back-btn {
		background: #6384fe;
		border-radius: 4px;
		line-height: 3px;
		position: absolute;
		top: 0;
		right: 20px;
	}
}
</style>

<style lang="less">
.bind-groups-to-scene-container .el-tabs__active-bar {
	background-color: #6384fe !important;
}
.bind-groups-to-scene-container .el-tabs__item {
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 400;
	color: #b7b7b7 !important;
}
.el-tabs__item.is-active {
	color: #6384fe !important;
}
.groups-pane {
	display: flex;
	flex-direction: row;
	width: 100%;
}
.selected-pane {
	width: 50%;
	margin-left: 20px;
	padding-left: 20px;
	padding-right: 20px;
	border: 0px solid gray;
	border-radius: 5px;
	flex-direction: row;
	flex: 1;
	align-items: right;
	align-content: right;
	justify-content: right;
	// justify-items: right;
}
.img-question-hover {
	font-size: 16px;
	display: flex;
}
.img-question {
	margin-left: 2px;
	top: 0px;
}
.tag-ghost {
	opacity: 0 !important;
}
</style>
